<script setup lang="ts">
import BoxBlock from '../components/boxBlock.vue';

import { ScrollBoard } from "@kjgl77/datav-vue3";
import { defineAsyncComponent, reactive } from "vue";
const BulkBarChart = defineAsyncComponent(() => import("../components/bulkBarChart.vue"));

const BulkLineChart = defineAsyncComponent(() => import("../components/bulkLineChart.vue"));

const config = reactive({
  header: ["场地名称", "装车日期", "板车车牌", "装载数量"],
  data: [
    ["南充场地", "2023-11-23", "渝A12345", "17"],
    ["资阳场地", "2023-11-22", "渝A32345", "23"],
    ["成都场地", "2023-11-24", "渝C22345", "21"],
    ["万州场地", "2023-11-25", "渝Ae2345", "15"],
    ["贵阳场地", "2023-11-26", "渝D1d345", "11"],
    ["昆明场地", "2023-11-27", "渝A12245", "12"],
    ["雅安场地", "2023-11-29", "渝B12d5", "8"],
    ["六盘水场地", "2023-11-30", "渝F23145", "12"],
  ],
  index: false,
  align: ["center"],
});

const mouseoverHandler = (e: any) => {
  console.log(e);
};

const clickHandler = (e: any) => {
  console.log(e);
};
</script>
<template>
  <div class="flex flex-col">
    <BoxBlock class="h-1/3" title="大宗物资行情走势">
      <div class="flex flex-wrap justify-center items-center">
        <BulkBarChart />
      </div>
    </BoxBlock>
    <BoxBlock class="h-1/3" title="大宗物料日拆解重量">
      <div class="flex flex-wrap justify-center items-center">
        <BulkLineChart />
      </div>
    </BoxBlock>
    <BoxBlock class="h-1/3" title="车辆在途情况">
      <div class="flex flex-wrap justify-center items-center">
        <ScrollBoard
          :config="config"
          style="width: 400px; height: 250px"
          @mouseover="mouseoverHandler"
          @click="clickHandler"
        />
      </div>
    </BoxBlock>
  </div>
</template>
<style scoped lang="less">
/deep/ .dv-scroll-board {
  .header {
    background-color: #083859 !important;
  }
}
</style>
`
